<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<!-- 链接：
    https://cn.vuejs.org/guide/reusability/custom-directives.html#directive-hooks


    说明：
        1. 当指令在初始化时会触发 created()、beforeMount()、mounted() 钩子函数
        2. 当使用 v-show 的时候，组件显示与隐藏（display：none） 会触发 beforeUpdate()、updated()
        3. 当使用 v-if 的时候，组件是直接销毁与重建 会触发 beforeUnmount()、unmounted()
 -->
<body>
    <div id="app"></div>
</body>
<script src="js/vue.js"></script>
<script>

    // 这里测试下，在指令中能使用的钩子函数
    const FocusDirective = {
        focus: {
            // 在绑定元素的 attribute 前
            // 或事件监听器应用前调用
            created(el, binding, vnode, prevVnode) {
                // 下面会介绍各个参数的细节
                console.log("created");
            },

            // 在元素被插入到 DOM 前调用
            beforeMount(el, binding, vnode, prevVnode) {
                console.log("beforeMount");
             },

            // 在绑定元素的父组件，及他自己的所有子节点都挂载完成后调用
            mounted(el, binding, vnode, prevVnode) { 
                el.focus();
                console.log("mounted");
            },

            // 绑定元素的父组件更新前调用
            beforeUpdate(el, binding, vnode, prevVnode) {
                console.log("beforeUpdate");
             },

            // 在绑定元素的父组件
            // 及他自己的所有子节点都更新后调用
            updated(el, binding, vnode, prevVnode) { 
                console.log("updated");
            },

            // 绑定元素的父组件卸载前调用
            beforeUnmount(el, binding, vnode, prevVnode) { 
                console.log("beforeUnmount");
            },

            // 绑定元素的父组件卸载后调用
            unmounted(el, binding, vnode, prevVnode) { 
                console.log("unmounted");
            },
        }
    };


    const app = Vue.createApp({
        data() {
            return {
                msg: '指令--使用钩子函数',
                flag: true
            }
        },
        // 用于挂载局部指令
        directives: FocusDirective,
        template: `
          <div v-if="flag">
            <h3>{{msg}}</h3>
            <input placeholder="请输入" v-focus />
          </div>
        `,
    }).mount("#app");

</script>

</html>
